<script setup lang="ts">
  import { ref, onMounted } from 'vue';
  import dayjs from 'dayjs';
  import { BasicTable, useTable, TableAction } from '@/components/Table';
  import { GetPaymentListApi, GetBankListApi } from '@/api/finance';
  import AddFinanceModal from './modal/AddFinance.vue';
  import EditFinanceModal from './modal/EditFinance.vue';
  import { useModal } from '@/components/Modal';

  const info = ref({});
  const bankList = ref([]);
  const typeText = ref(['微信', '支付宝', '银行卡', 'USDT-TRC20']);
  onMounted(async () => {
    const data = await GetBankListApi();
    bankList.value = data.list;
  });

  const getBankName = (id) => {
    return bankList.value[id];
  };

  const [registerModal, { openModal }] = useModal();
  const [registerEditModal, { openModal: openEditModal }] = useModal();

  const [registerTable, { getRawDataSource, reload }] = useTable({
    title: '收款信息',
    canResize: true,
    columns: [
      {
        title: '收款类型',
        dataIndex: 'type',
      },
      {
        title: '收款姓名',
        dataIndex: 'name',
      },
      {
        title: '收款账号/USDT币地',
        dataIndex: 'card',
      },
      {
        title: '银行名称',
        dataIndex: 'bankId',
      },
      {
        title: '收款统计',
        dataIndex: 'commission',
      },
      {
        title: '备注信息',
        dataIndex: 'remark',
      },
      {
        title: '二维码',
        dataIndex: 'qrcode',
      },
      {
        title: '创建时间',
        dataIndex: 'create_time',
      },
      {
        title: '操作',
        dataIndex: 'action',
        fixed: 'right',
      },
    ],
    bordered: true,
    showSelectionBar: false,
    showTableSetting: true,
    accordion: true, // 手风琴效果
    api: GetPaymentListApi,
    fetchSetting: {
      listField: 'list',
    },
    afterFetch: () => {
      const data = getRawDataSource();
      info.value = data;
    },
    useSearchForm: true,
    formConfig: {
      labelWidth: 120,
      schemas: [
        {
          field: 'type',
          label: '收款类型',
          component: 'Select',
          colProps: {
            span: 6,
          },
          componentProps: {
            options: [
              {
                value: 0,
                label: '微信',
              },
              {
                value: 1,
                label: '支付宝',
              },
              {
                value: 2,
                label: '银行卡',
              },
              {
                value: 3,
                label: 'USDT-TRC20',
              },
            ],
          },
        },
        {
          field: 'orderNo',
          label: '收款信息',
          component: 'Input',
          colProps: {
            span: 6,
          },
        },
      ],
    },
    rowKey: 'id',
    takeCare: '这是注意事项',
  });

  function settimeRefresh() {
    setTimeout(() => {
      reload();
    }, 500);
  }

  const handleEdit = (record) => {
    console.log(record);
    openEditModal(true, record);
  };

  const handleDel = (record) => {
    console.log(record);
  };
</script>
<template>
  <main>
    <a-row :gutter="16">
      <a-col :span="24" style="margin-top: 16px">
        <BasicTable @register="registerTable">
          <template #toolbar>
            <a-button type="primary" size="small" @click="openModal(true)">添加收款信息</a-button>
          </template>
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'create_time'">
              {{ dayjs(record.create_time * 1000).format('YYYY-MM-DD HH:mm:ss') }}
            </template>
            <template v-if="column.key === 'update_time'">
              {{ dayjs(record.update_time * 1000).format('YYYY-MM-DD HH:mm:ss') }}
            </template>
            <template v-if="column.key === 'type'">{{ typeText[record.type] }}</template>
            <template v-if="column.key === 'bankId'">
              {{ getBankName(record.bankId) }}
            </template>
            <template v-if="column.key === 'qrcode'">
              <a-qrcode :src="record.qrcode" size="120" />
            </template>
            <template v-if="column.key === 'action'">
              <TableAction
                :actions="[
                  {
                    label: '修改',
                    type: 'default',
                    onClick: handleEdit.bind(null, record),
                  },
                  {
                    label: '删除',
                    type: 'primary',
                    onClick: handleDel.bind(null, record),
                  },
                ]"
              />
            </template>
          </template>
        </BasicTable>
      </a-col>
    </a-row>

    <AddFinanceModal @register="registerModal" @ok="settimeRefresh" />
    <EditFinanceModal @register="registerEditModal" @ok="settimeRefresh" />
  </main>
</template>
